<style type ="text/css">br {
	clear: both;
}

html, body {
  text-align: center;
	margin:0;
	padding:0;
}

.horizontalSeparator {
	height: 1px;
	background:#717171; 
}
	
.verticalSeparator {
	width: 1px;
	background: #f78d1d;
}

/* style used by the count down timer library */
.cntSeparator {
   font-size: 54px;
   margin: 10px 7px;
   color: #000;
}

/*   This shows how to center using just div tags. Learn more here 
	 http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support */
#timerContainerLevel1 {
	float:left;
	width: 100%;
	overflow:hidden;
   	position:relative;
}
#timerContainerLevel2 {
	position:relative;
   	left:50%; 
	float: left;
}
.timerDisplay {
	position:relative;
   	right:50%; 
	float: left;
}

#breakDetails {
	float: left;
	text-align: left;
}

#soundSettings {
	float: right;
}

.audioSettingsButton {
	width: 30px;
	height: 30px;
	float: right;
	padding-top: 20px;
}
.audioSettingsButton_noPadding {
	width: 30px;
	height: 30px;
	float: right;	
	padding-top: 0px;
}	
a {
	color: blue;
}

.text {
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	color: #000;
	margin-right: auto;
	width: 100%;
}

.text_underlined {
	text-decoration:underline;
}

.text_smaller {
	font-size: 10px;
}	

input[type=range] {
   	border: 1px solid #fcd3a5;
	background:-webkit-gradient(linear,center top, center bottom, from(#fcd3a5),to(#f47c20),color-stop(50%,#f47c20));
	float:left;
	cursor: pointer; cursor: hand;
	-webkit-appearance:none;
	-webkit-border-radius:5px;
	vertical-align:middle;
}
input[type=range]::-webkit-slider-thumb
{
   -webkit-appearance:none;
   border:1px solid gray;
   background-color:#000;
   width:8px;
   height:5px;
   vertical-align:middle;
}

.textLarge {
	font-size: 16px;
}

.banner {
	background-color: #ffd042;
	padding: 5px;
	border:2px solid orange;
	visibility: hidden;
}

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	padding: .2em 2em .25em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a),
		to(#f47a20) );
	background: -moz-linear-gradient(top, #faa51a, #f47a20);
	filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr =
		'#faa51a', endColorstr = '#f47a20' );
}

.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11),
		to(#f06015) );
	background: -moz-linear-gradient(top, #f88e11, #f06015);
	filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr =
		'#f88e11', endColorstr = '#f06015' );
}

.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20),
		to(#faa51a) );
	background: -moz-linear-gradient(top, #f47a20, #faa51a);
	filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr =
		'#f47a20', endColorstr = '#faa51a' );
}

</style>